<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.Shoping.entity.Constants " %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>朝花夕拾</title>
    <link rel="stylesheet" href="./CSS/homePage-css.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="main-div">
    <div class="header-div">
        <div class="top-div" id="top">
            <div class="logo-div"></div>
            <div class="nav-div">
                <div class="text-div">
                        <span>
                            <c:choose>
                                <c:when test="${user != null}">${user.uUsername}</c:when>
                                <c:otherwise><a href="/ProgramJSP/login.jsp">登录</a></c:otherwise>
                            </c:choose>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <a href="ProgramJSP/register.jsp">注册</a>
                        </span>
                </div>
                <div class="form-div">
                    <form action="">
                        <input type="search" placeholder="热门搜索：干花花瓶">
                        <input type="button">
                    </form>
                </div>
                <div class="a-img-div">
                    <a href="./ProgramJSP/grzx.jsp">
                        <img src="img/goktech-img/images/grzx.png" alt="无法加载图片">
                    </a>
                    <a href="#">
                        <img class="ewm" src="img/goktech-img/images/ewm.png" alt="无法加载图片">
                    </a>
                    <a href="ProgramJSP/gwc.jsp">
                        <img src="img/goktech-img/images/gwc.png" alt="无法加载图片">
                    </a>
                    <div class="ewm-div">
                        <img src="img/goktech-img/images/smewm.png" alt="无法加载图片">
                    </div>
                </div>
            </div>
        </div>
        <div class="column-div">
            <ul>
                <li><a href="homePage.jsp">商品首页</a></li>
                <li><a href="#">所有商品</a>
                    <div class="dropdown-content-one">
                        <div class="wrapper">
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="./img/WebProgram/img/nav1.jpg" alt="">
                                </div>
                                <div class="dropdown-text-div">
                                    <span>浓情欧式</span>
                                </div>
                            </a>
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="./img/WebProgram/img/nav2.jpg" alt="">
                                </div>
                                <div class="dropdown-text-div">
                                    <span>浪漫美式</span>
                                </div>
                            </a>
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="./img/WebProgram/img/nav3.jpg" alt="">
                                </div>
                                <div class="dropdown-text-div">
                                    <span>雅致中式</span>
                                </div>
                            </a>
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="./img/WebProgram/img/nav6.jpg" alt="">
                                </div>
                                <div class="dropdown-text-div">
                                    <span>简约现代</span>
                                </div>
                            </a>
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="./img/WebProgram/img/nav5.jpg" alt="">
                                </div>
                                <div class="dropdown-text-div">
                                    <span>创意装饰</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li><a href="#">装饰摆件</a></li>
                <li><a href="#">布艺软饰</a></li>
                <li><a href="#">墙饰壁挂</a></li>
                <li><a href="#">蜡艺香薰</a></li>
                <li><a href="#">创意家居</a></li>
            </ul>
        </div>
    </div>
    <div id="switch-div" class="footer-div"></div>
    <div class="main-series-div">
        <div class="parcel-div">
            <div><img src="img/goktech-img/images/i1.jpg" alt=""></div>
            <div><img src="img/goktech-img/images/i2.jpg" alt=""></div>
            <div><img src="img/goktech-img/images/i3.jpg" alt=""></div>
        </div>
    </div>
    <div class="title1-div">
        <img src="img/goktech-img/images/tit01.jpg" alt="">
    </div>
    <div class="European-style">
        <div class="parcel-div">
            <div class="top-div">
                <div class="parcel-div">
                    <a href="#">
                        <span class="prefix"></span>
                        <img src="img/goktech-img/images/European-flo4.jpg" alt="">
                        <span class="suffix"></span>
                    </a>
                    <div class="detail-div"><span>【花艺】跳舞兰仿真花干花</span></div>
                    <div class="price-div"><span>￥17.90</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="title4-div">
        <img src="img/goktech-img/images/tit04.jpg" alt="">
    </div>
    <div class="Modern">
        <div class="parcel-div">
            <div class="top-div">
                <div class="parcel-div">
                    <a href="#">
                        <img src="img/goktech-img/images/modern2.jpg" alt="">
                        <p></p>
                    </a>
                    <div class="detail-div"><span>【最家】美丽仿真花束</span></div>
                    <div class="price-div"><span>￥49.90</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="xx-title-div">
        <img src="img/goktech-img/images/xxB02.jpg" alt="">
    </div>
    <div class="xiangxun">
        <div class="parcel-div">
            <div class="top-div">
                <div class="parcel-div">
                    <a href="#">
                        <span class="prefix"></span>
                        <img src="img/goktech-img/images/xx202.jpg" alt="">
                        <span class="suffix"></span>
                    </a>
                    <div class="detail-div"><span>【新式】白兰诗香薰</span></div>
                    <div class="price-div"><span>￥299.90</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="main-footer-div">
        <div class="top-div">
            <div class="parcel-div">
                <div class="clearfix">
                    <img src="img/temp1/foot1.png" alt="无法加载图片">
                    <span>7天无理由退货</span>
                </div>
                <div class="clearfix">
                    <img src="img/temp1/foot2.png" alt="无法加载图片">
                    <span>15天免费换货</span>
                </div>
                <div class="clearfix">
                    <img src="img/temp1/foot3.png" alt="无法加载图片">
                    <span>满599包邮</span>
                </div>
                <div class="clearfix">
                    <img src="img/temp1/foot4.png" alt="无法加载图片">
                    <span>手机特色服务</span>
                </div>
            </div>
        </div>
        <div class="botton-div">
            <p>最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br>
                违法和不良信息举报电话:400-800-8200,本网站所列数据,除特殊说明,所有数据均出自我司实验室测试
            </p>
        </div>
    </div>
    <div class="broadside-nav">
        <div>
            <a href="./ProgramJSP/gwc.jsp">
                <img src="img/goktech-img/images/gwc.png" alt="">
                <span>去购<br>物车</span>
            </a>
        </div>
        <div class="service-div">
            <a href="#">
                <img src="img/goktech-img/images/gt2.png" alt="">
                <span>联系<br>客服</span>
            </a>
        </div>
        <div>
            <a href="./ProgramJSP/grzx.jsp">
                <img src="img/goktech-img/images/grzx.png" alt="">
                <span>个人<br>中心</span>
            </a>
        </div>
        <div class="hidden-div">
            <a href="#top">
                <img src="img/goktech-img/images/gt4.png" alt="">
                <span>返回<br>顶部</span>
            </a>
        </div>
        <p class="hidden-p">400-800-8200</p>
    </div>
</div>
</body>
<script src="./js/homePage-js.js"></script>
<script>
    $(function () {
        $.ajax({
            url: "${pageContext.request.contextPath}/commodity?method=European",
            type: "POST",
            data: {"cgId": 1},
            dataType: "json",
            success: function (message) {
                var str = `<div class="parcel-div">
            <div class="top-div">`;
                for(var i=0 ; i<message.length ; i++){
                    str = str + `<div class="parcel-div">
                    <a href="${pageContext.request.contextPath}/ProgramJSP/details-of-goods.jsp?cmId=`+message[i].cmId+`">
                        <span class="prefix"></span>
                        <img src="`+message[i].cmImg+`" alt="">
                        <span class="suffix"></span>
                    </a>
                    <div class="detail-div"><span>`+message[i].cmName+`</span></div>
                    <div class="price-div"><span>`+message[i].cmPrice+`.00</span></div>
                </div>`;
                    if((i+1)%3==0){
                        str = str +`</div>
\t\t\t<div class="top-div">`;
                    }
                }
                str = str + `</div>
        </div>`;
                $(".European-style").html(str);
                console.log(str);
            },
            error: function (jqXHR) {
                alert("失败!");
            }
        });

        $.ajax({
            url: "${pageContext.request.contextPath}/commodity?method=Modern",
            type: "POST",
            data: {"cgId": 2},
            dataType: "json",
            success: function (message) {
                var str = `<div class="parcel-div">
            <div class="top-div">`;
                for(var i=0 ; i<message.length ; i++){
                    str = str + `<div class="parcel-div">
                    <a href="${pageContext.request.contextPath}/ProgramJSP/details-of-goods.jsp?cmId=`+message[i].cmId+`">
                        <span class="prefix"></span>
                        <img src="`+message[i].cmImg+`" alt="">
                        <span class="suffix"></span>
                    </a>
                    <div class="detail-div"><span>`+message[i].cmName+`</span></div>
                    <div class="price-div"><span>`+message[i].cmPrice+`.00</span></div>
                </div>`;
                    if((i+1)%4==0){
                        str = str +`</div>
\t\t\t<div class="top-div">`;
                    }
                }
                str = str + `</div>
        </div>`;
                $(".Modern").html(str);
                console.log(str);
            },
            error: function (jqXHR) {
                alert("失败!");
            }
        });

        $.ajax({
            url: "${pageContext.request.contextPath}/commodity?method=xiangxun",
            type: "POST",
            data: {"cgId": 3},
            dataType: "json",
            success: function (message) {
                var str = `<div class="parcel-div">
            <div class="top-div">`;
                for(var i=0 ; i<message.length ; i++){
                    str = str + `<div class="parcel-div">
                    <a href="${pageContext.request.contextPath}/ProgramJSP/details-of-goods.jsp?cmId=`+message[i].cmId+`">
                        <span class="prefix"></span>
                        <img src="`+message[i].cmImg+`" alt="">
                        <span class="suffix"></span>
                    </a>
                    <div class="detail-div"><span>`+message[i].cmName+`</span></div>
                    <div class="price-div"><span>`+message[i].cmPrice+`.00</span></div>
                </div>`;
                    if((i+1)%4==0){
                        str = str +`</div>
\t\t\t<div class="top-div">`;
                    }
                }
                str = str + `</div>
        </div>`;
                $(".xiangxun").html(str);
                console.log(str);
            },
            error: function (jqXHR) {
                alert("失败!");
            }
        });
    });
</script>
</html>
